class Basket{
  constructor(ctx){
    this.ctx = ctx;
    this.img = new Image();
    this.img.src = 'images/basket.jpg';
    //篮子的坐标位置
    this.init = {
      x: ctx.canvas.width / 2 - 93 / 2,
      y: ctx.canvas.height - 120,
      w: 115,
      h: 80
    }
    //是否按住了篮子（默认没有）
    this.status = false;
  }
  
  draw() {
    //绘制篮子
    this.ctx.drawImage(this.img, this.init.x, this.init.y, this.init.w, this.init.h);

  }
 
  
  listen() {
    //监听篮子的移动操作
    this.ctx.canvas.addEventListener('touchstart', (e) => {
      //判断是否按住了篮子
      //获取按下时手指的坐标
      let dot = e.changedTouches[0];
      if (dot.clientX > this.init.x && dot.clientX < this.init.x + this.init.w && dot.clientY > this.init.y && dot.clientY < this.init.y + this.init.h) {
        console.log('按住了');
        this.status = true;
      }

    });
    this.ctx.canvas.addEventListener('touchmove', (e) => {
      //如果是真的点到篮子才能动
      if (this.status) {
        //获取手指移动时，实时坐标
        let touch = e.changedTouches[0];
        let x = touch.clientX;
        let y = touch.clientY;
        //修改篮子左上角的坐标(保证手指位于篮子的正中心))
        this.init.x = x - this.init.w / 2;
        this.init.y = y - this.init.h / 2;
        //控制篮子移动的边界
        if (this.init.x < 0) {
          //左边界
          this.init.x = 0;
        }
        if (this.init.x > this.ctx.canvas.width - this.init.w) {
          //右边界
          this.init.x = this.ctx.canvas.width - this.init.w;
        }
        if (this.init.y < this.ctx.canvas.height - 120) {
          //上边界
          this.init.y = this.ctx.canvas.height - 120;
        }
        if (this.init.y > this.ctx.canvas.height - 120) {
          //下边界
          this.init.y = this.ctx.canvas.height - 120;
        }
      }
    });
    this.ctx.canvas.addEventListener('touchend', (e) => {
      //手指离开屏幕时，重置状态
      this.status = false;
    });
  }
}
export default Basket;